<template>
  <dtDialog
    title="主题配置"
    :visible.sync="themeConfigVisible"
    :is-loading="loading"
    @closeDialog="resetThemeTemp"
    @comfirmBtn="submit"
  >
    <el-tabs slot="content" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="平台配置" name="first">
        <el-form
          ref="themeDataForm"
          :rules="themeRules"
          :model="themeTemp"
          label-position="right"
          label-width="110px"
        >
          <el-form-item label="平台名称" prop="platformName">
            <el-input v-model="themeTemp.platformName" maxlength="20" placeholder="请输入平台名称"
                      show-word-limit />
          </el-form-item>
          <el-form-item ref="platformLogoRef" label="平台logo" prop="platformLogo">
            <!-- <dtUpload ref="uploadRef" /> -->
            <dtUpload v-model="platformLogo" :list-type="'picture-card'" />
          </el-form-item>
          <el-form-item ref="homeBannerRef" label="门户banner" prop="homeBanner">
            <dtUpload v-model="homeBanner" :list-type="'picture-card'" />
            <span style="font-size:12px">建议上传图片尺寸为1920*260</span>
          </el-form-item>
          <el-form-item label="页脚文字" prop="footerText">
            <el-input v-model="themeTemp.footerText" maxlength="100" placeholder="请输入页脚文字"
                      :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit
                      class="limit" />
          </el-form-item>
          <el-form-item label="备案号" prop="recordNo">
            <el-input v-model="themeTemp.recordNo" maxlength="101" placeholder="请输入备案号"
                      :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit
                      class="limit" />
          </el-form-item>
          <el-form-item label="备案链接" prop="recordUrl">
            <el-input v-model="themeTemp.recordUrl" maxlength="101" placeholder="请输入备案链接"
                      :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit
                      class="limit" />
          </el-form-item>
          <el-form-item label="帮助中心入口" label-width="120px" prop="helpEnter">
            <el-switch v-model="themeTemp.helpEnter" class="drawer-switch" @change="switchChange($event,'helpEnter','helpEnter')" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="其他配置" name="second">
        <el-form
          ref="themeDataForm1"
          :rules="themeRules"
          :model="themeTemp"
          label-position="right"
          label-width="110px"
        >
          <el-form-item label="主题名称" prop="themeName">
            <el-input v-model="themeTemp.themeName" maxlength="100" placeholder="请输入主题名称"
                      disabled />
          </el-form-item>
          <el-form-item label="主题颜色" prop="themeColor">
            <div class="colorbox">
              <div v-for="(item,index) in colorlists" :key="index" class="color-item"
                   :style="{background:item}" @click="changeTheme(item)">
                <i v-if="themeTemp.themeColor===item" class="el-icon-check" style="color:#fff;" />
              </div>
              <dt-theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="changeTheme" />
            </div>
          </el-form-item>
          <el-form-item label="顶栏" prop="topBar" class="navigation">
            <el-tooltip v-for="item in topBarOptions" :key="item.name" class="item"
                        effect="dark" :content="item.name" placement="top">
              `<div :class="item.className" :style="{'--themebg': themeTemp.themeColor}" @click="themeChange('TopTheme','topBar',item.value)">
                <span v-if="themeTemp.topBar===item.value">
                  <svg-icon icon-class="check" class-name="disabled" />
                </span>
              </div>`
            </el-tooltip>
          </el-form-item>
          <el-form-item label="侧边栏" prop="sideBar" class="navigation">
            <el-tooltip v-for="item in sideBarOptions" :key="item.name" class="item"
                        effect="dark" :content="item.name" placement="top">
              <div :class="item.className" @click="themeChange('sidebarTheme','sideBar',item.value)">
                <span v-if="themeTemp.sideBar===item.value">
                  <svg-icon icon-class="check" class-name="disabled" />
                </span>
              </div>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="导航模式" prop="navigationMode" class="navigation">
            <div class="cbox">
              <div v-for="item in navigationModeOptions" :key="item.value" :class="item.className"
                   @click="themeChange('navigationMode','navigationMode',item.value)">
                <span v-if="themeTemp.navigationMode==item.value">
                  <svg-icon icon-class="check" class-name="disabled" />
                </span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="多页签栏" label-width="120px" prop="multiTabBar">
            <el-switch v-model="themeTemp.multiTabBar" class="drawer-switch" @change="switchChange($event,'tagsView','multiTabBar')" />
          <!-- <el-switch v-model="themeTemp.multiTabBar" class="drawer-switch" @change="themeChange('tagsView','multiTabBar',value)" /> -->
          </el-form-item>
          <el-form-item label="固定导航栏" label-width="120px" prop="fixedNavigationBar">
            <el-switch v-model="themeTemp.fixedNavigationBar" class="drawer-switch" @change="switchChange($event,'fixedHeader','fixedNavigationBar')" />
          </el-form-item>
          <el-form-item label="logo宽度自适应" label-width="120px" prop="logoAdaptiveWidth">
            <el-switch v-model="themeTemp.logoAdaptiveWidth" class="drawer-switch" @change="switchChange($event,'logoAuto','logoAdaptiveWidth')" />
          </el-form-item>
          <el-form-item label="开启底栏" label-width="120px" prop="logoAdaptiveWidth">
            <el-switch v-model="themeTemp.bottomBar" class="drawer-switch" @change="switchChange($event,'openFooter','bottomBar')" />
          </el-form-item>

          <el-form-item label="路由切换动画" label-width="120px" prop="routeSwitchingAnimation">
            <el-select v-model="themeTemp.routeSwitchingAnimation" style="height:40px;" placeholder="请选择">
              <el-option
                v-for="item in animationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!--
    <el-form
      ref="themeDataForm"
      slot="content"
      :rules="themeRules"
      :model="themeTemp"
      label-position="right"
      label-width="110px"
    >
      <el-form-item label="主题名称" prop="themeName">
        <el-input v-model="themeTemp.themeName" maxlength="100" placeholder="请输入主题名称" disabled />
      </el-form-item>
      <el-form-item label="主题颜色" prop="themeColor">
        <div class="colorbox">
          <div v-for="(item,index) in colorlists" :key="index" class="color-item" :style="{background:item}" @click="changeTheme(item)">
            <i v-if="themeTemp.themeColor===item" class="el-icon-check" style="color:#fff;" />
          </div>
          <dt-theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="changeTheme" />
        </div>
      </el-form-item>
      <el-form-item label="顶栏" prop="topBar" class="navigation">
        <el-tooltip v-for="item in topBarOptions" :key="item.name" class="item" effect="dark" :content="item.name" placement="top">
          `<div :class="item.className" :style="{'--themebg': themeTemp.themeColor}" @click="themeChange('TopTheme','topBar',item.value)">
            <span v-if="themeTemp.topBar===item.value">
              <svg-icon icon-class="check" class-name="disabled" />
            </span>
          </div>`
        </el-tooltip>
      </el-form-item>
      <el-form-item label="侧边栏" prop="sideBar" class="navigation">
        <el-tooltip v-for="item in sideBarOptions" :key="item.name" class="item" effect="dark" :content="item.name" placement="top">
          <div :class="item.className" @click="themeChange('sidebarTheme','sideBar',item.value)">
            <span v-if="themeTemp.sideBar===item.value">
              <svg-icon icon-class="check" class-name="disabled" />
            </span>
          </div>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="导航模式" prop="navigationMode" class="navigation">
        <div class="cbox">
          <div v-for="item in navigationModeOptions" :key="item.value" :class="item.className" @click="themeChange('navigationMode','navigationMode',item.value)">
            <span v-if="themeTemp.navigationMode==item.value">
              <svg-icon icon-class="check" class-name="disabled" />
            </span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="平台名称" prop="platformName">
        <el-input v-model="themeTemp.platformName" maxlength="20" placeholder="请输入平台名称" show-word-limit />
      </el-form-item>
      <el-form-item ref="homeBannerRef" label="门户banner" prop="homeBanner">
        <dtUpload v-model="homeBanner" :list-type="'picture-card'" />
        <span style="font-size:12px">建议上传图片尺寸为1920*260</span>
      </el-form-item>

      <el-form-item ref="platformLogoRef" label="平台logo" prop="platformLogo">
        <dtUpload v-model="platformLogo" :list-type="'picture-card'" />
      </el-form-item>
      <el-form-item label="页脚文字" prop="footerText">
        <el-input v-model="themeTemp.footerText" maxlength="100" placeholder="请输入页脚文字" :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit />
      </el-form-item>
      <el-form-item label="备案号" prop="recordNo">
        <el-input v-model="themeTemp.recordNo" maxlength="101" placeholder="请输入备案号" :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit />
      </el-form-item>
      <el-form-item label="备案链接" prop="recordUrl">
        <el-input v-model="themeTemp.recordUrl" maxlength="101" placeholder="请输入备案链接" :autosize="{ minRows: 3, maxRows: 4}" type="textarea" show-word-limit />
      </el-form-item>
      <el-form-item label="其他配置">
        <el-form-item label="多页签栏" label-width="120px" prop="multiTabBar">
          <el-switch v-model="themeTemp.multiTabBar" class="drawer-switch" @change="switchChange($event,'tagsView','multiTabBar')" />
        </el-form-item>
        <el-form-item label="固定导航栏" label-width="120px" prop="fixedNavigationBar">
          <el-switch v-model="themeTemp.fixedNavigationBar" class="drawer-switch" @change="switchChange($event,'fixedHeader','fixedNavigationBar')" />
        </el-form-item>
        <el-form-item label="logo宽度自适应" label-width="120px" prop="logoAdaptiveWidth">
          <el-switch v-model="themeTemp.logoAdaptiveWidth" class="drawer-switch" @change="switchChange($event,'logoAuto','logoAdaptiveWidth')" />
        </el-form-item>
        <el-form-item label="开启底栏" label-width="120px" prop="logoAdaptiveWidth">
          <el-switch v-model="themeTemp.bottomBar" class="drawer-switch" @change="switchChange($event,'openFooter','bottomBar')" />
        </el-form-item>
        <el-form-item label="帮助中心入口" label-width="120px" prop="helpEnter">
          <el-switch v-model="themeTemp.helpEnter" class="drawer-switch" @change="switchChange($event,'helpEnter','helpEnter')" />
        </el-form-item>
        <el-form-item label="路由切换动画" label-width="120px" prop="routeSwitchingAnimation">
          <el-select v-model="themeTemp.routeSwitchingAnimation" style="height:40px;" placeholder="请选择">
            <el-option
              v-for="item in animationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form-item>
    </el-form> -->
  </dtDialog>
</template>
<script>
import themeApi from '@/framework/api/themeManage'
import { checkCharString } from '@/framework/utils/validate'
import { cloud } from '@/framework/utils/request'

export default {
  data() {
    const platformNameValidate = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入平台名称'))
      } else if (!checkCharString(value)) {
        callback(new Error('请输入汉字、数字、大小写字母、下划线、中划线'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      banner: '',
      themeRow: {},
      topBarOptions: [
        {
          name: '白色顶栏',
          className: ['c-black', 't-white'],
          value: 'white'
        },
        {
          name: '黑色顶栏',
          className: ['c-black', 't-black'],
          value: 'black'
        },
        {
          name: '主题色顶栏',
          className: ['c-black', 't-black', 't-theme'],
          value: 'theme'
        }
      ],
      sideBarOptions: [
        {
          name: '黑色侧栏',
          className: ['c-black'],
          value: 'black'
        },
        {
          name: '亮色侧栏',
          className: ['c-black', 'c-white'],
          value: 'white'
        }
      ],
      navigationModeOptions: [
        {
          // name: '黑色侧栏',
          className: ['c-black', 'm-black', 'm-l-black'],
          value: 'left'
        },
        {
          className: ['c-black', 'm-black', 'm-t-black'],
          value: 'top'
        },
        {
          className: ['c-black', 'm-black'],
          value: 'blend'
        }
      ],
      colorlists: ['#3461FF', '#5F80C7', '#FAAD14', '#F5686F', '#9266F9', '#33CC99', '#32A2D4'],
      themeConfigVisible: false,
      themeRules: {
        platformName: [
          { required: true, trigger: 'change', validator: platformNameValidate }
        ],
        platformLogo: [
          { type: 'array',
            required: true,
            message: '请上传平台logo',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (!this.platformLogo || this.platformLogo.length == 0) {
                callback(new Error('请上传平台logo'))
              } else {
                callback()
              }
            } }
        ],
        homeBanner: [
          { required: false, message: '请上传门户banner', trigger: 'change' }

          // { type: 'array', required: false, message: '请上传门户banner', trigger: 'change', validator: (rule, value, callback) => {
          //   if (!this.homeBanner || this.homeBanner.length == 0) {
          //     callback(new Error('请上传门户banner'))
          //   } else {
          //     callback()
          //   }
          // } }
        ],
        footerText: [
          { required: true, message: '请输入页脚文字', trigger: 'change' }
        ]
        // multiTabBar: [
        //   { required: true, message: '请输入多页签栏', trigger: 'change' }
        // ],
        // routeSwitchingAnimation: [
        //   { required: true, message: '请选择路由切换动画', trigger: 'change' }
        // ]
      },
      themeTemp: {
        timerName: '',
        params: '',
        platformLogo: [],
        homeBanner: [],
        themeColor: ''
      },
      platformLogo: [],
      homeBanner: [],
      dialogStatus: '',
      loading: false,
      animationOptions: [{
        value: 'fade',
        label: '淡入淡出'
      }, {
        value: 'fade-transform',
        label: '滑动消退'
      }, {
        value: 'breadcrumb',
        label: '面包屑'
      },
      {
        value: 'scale',
        label: '缩小渐变'
      },
      {
        value: 'scale-large',
        label: '放大渐变'
      }
      ]
    }
  },
  computed: {
    themeActive: {
      get() {
        return this.$store.state.settings.theme
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'theme',
          value: val
        })
      }
    },
    logoAuto: {
      get() {
        return this.$store.state.settings.logoAuto
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'logoAuto',
          value: val
        })
      }
    },
    helpEnter: {
      get() {
        return this.$store.state.settings.helpEnter
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'helpEnter',
          value: val
        })
      }
    },
    openFooter: {
      get() {
        return this.$store.state.settings.openFooter
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'openFooter',
          value: val
        })
      }
    },
    routerAnimation: {
      get() {
        return this.$store.state.settings.routerAnimation
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'routerAnimation',
          value: val
        })
      }
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'fixedHeader',
          value: val
        })
      }
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: val
        })
      }
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'sidebarLogo',
          value: val
        })
      }
    },
    navigationMode: {
      get() {
        return this.$store.state.settings.navigationMode
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'navigationMode',
          value: val
        })
      }
    },
    sidebarTheme: {
      get() {
        return this.$store.state.settings.sidebarTheme
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'sidebarTheme',
          value: val
        })
      }
    },
    TopTheme: {
      get() {
        return this.$store.state.settings.TopTheme
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'TopTheme',
          value: val
        })
      }
    }
  },
  watch: {
    platformLogo() {
      this.$refs.platformLogoRef?.$emit('el.form.change')
    },
    homeBanner() {
      this.$refs.homeBannerRef?.$emit('el.form.change')
    }
  },
  methods: {
    handleClick(tab, event) {
    },
    changeTheme(item) {
      this.themeChange('theme', 'themeColor', item)
    },
    themeChange(themeKey, themeTempKey, val) {
      this.$set(this.themeTemp, themeTempKey, val)
      if (this.themeRow.statusFlag == 1) {
        this.$store.dispatch('settings/changeSetting', {
          key: themeKey,
          value: val
        })
      }
    },
    switchChange(val, themeKey, themeTempKey) {
      this.themeChange(themeKey, themeTempKey, val)
    },
    handleCropperSuccess(file) {

    },
    uploadLogo() {
      // this.$refs.uploadRef
    },
    handleThemeConfig(row, flag) {
      this.themeRow = row
      this.themeTemp = {}
      this.platformLogo = []
      this.homeBanner = []
      themeApi.detail({ themeId: row.themeId }).then((res) => {
        this.themeTemp = res.data
        if (this.themeTemp.statusFlag == 1) {
          this.themeActive = this.themeTemp.themeColor // 主题颜色选择
          this.TopTheme = this.themeTemp.topBar // 顶栏
          this.sidebarTheme = this.themeTemp.sideBar // 侧边栏
          this.navigationMode = this.themeTemp.navigationMode // 导航模式
          this.tagsView = this.themeTemp.multiTabBar // 多页签栏
          this.fixedHeader = this.themeTemp.fixedNavigationBar// 固定导航栏
          this.logoAuto = this.themeTemp.logoAdaptiveWidth // logo自适应
          this.openFooter = this.themeTemp.bottomBar // 开启底栏
          this.helpEnter = this.themeTemp.helpEnter // 帮助中心入口
        }
        flag == 'close' ? this.themeConfigVisible = false : this.themeConfigVisible = true
        this.$nextTick(() => {
          this.$refs.themeDataForm.clearValidate()
          if (res.data.platformLogo) {
            this.platformLogo = [{ fileId: res.data.platformLogo, url: `${process.env.VUE_APP_BASE_API + cloud.file}/sysFileInfo/private/preview?fileId=${res.data.platformLogo}&token=${this.$store.getters.token}`, name: '' }]
          }
          if (res.data.homeBanner) {
            this.homeBanner = [{ fileId: res.data.homeBanner, url: `${process.env.VUE_APP_BASE_API + cloud.file}/sysFileInfo/private/preview?fileId=${res.data.homeBanner}&token=${this.$store.getters.token}`, name: '' }]
          }
        })
      })
    },
    resetThemeTemp() {
      this.handleThemeConfig(this.themeRow, 'close')
      this.$refs.themeDataForm.resetFields()
    },
    submit() {
      this.$refs.themeDataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.homeBanner && this.homeBanner.length > 0) {
            this.themeTemp.homeBanner = this.homeBanner[0].fileId
          } else {
            this.themeTemp.homeBanner = ''
          }
          this.themeTemp.platformLogo = this.platformLogo[0].fileId
          this.$refs.themeDataForm1.validate((valid) => {
            if (valid) {
              try {
                themeApi.edit(this.themeTemp).then((res) => {
                  this.$dtMessage({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.themeConfigVisible = false
                  this.$parent.getList()
                  this.$store.dispatch('settings/getCurrentThemeInfo')
                })
                this.loading = false
              } catch (error) {
                this.loading = false
              }
            }
          })
        } else {
          this.activeName = 'first'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .colorbox{
    display: flex;
    height: 36px;
    align-items: center;
    .color-item{
      width: 20px;
      height: 20px;
      margin: 0 4px;
      box-shadow: 0px 4px 16px 4px rgba(0,0,0,0.0400), 0px 4px 8px 0px rgba(0,0,0,0.0800), 0px 2px 4px -2px rgba(0,0,0,0.1200);
      border-radius: 2px 2px 2px 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .navigation{
    .c-black{
      width: 52px;
      height: 36px;
      line-height: 1;
      border-radius: 3px;
      margin: 0 0px 0px 14px ;
      padding: 16px 0 0 26px;
      box-sizing: border-box;
      box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
      display: inline-block;
      vertical-align: top;
      position: relative;
      cursor: pointer;
      transition: background-color .2s;
      background: #f7f7f7;
      overflow: hidden;
    }
    .c-black::before{
      content: "";
      width: 100%;
      height: 10px;
      background: #fff;
      position: absolute;
      left: 0;
      top: 0;
      transition: background-color .2s;
      border-top-left-radius: 4px;
    }
    .c-black::after{
      width: 14px;
      height: 100%;
      background: #001529;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      transition: background-color .2s;
      box-sizing: border-box;
    }
    .c-white::after{
      background: #fff;
    }
    .t-white::after{
      background: #fff;
      z-index: 999;
    }
    .t-black::before{
      background: #001529;
      z-index: 999;
    }
    .t-black::after{
      background: #fff;
    }
    .t-theme::before{
      background: var(--themebg);
      z-index: 999;
    }
    .m-black::before{
      background: #001529;
    }
    .m-black::after{
      background: #001529;
    }
    .m-t-black{
      margin: 0 20px;
    }
    .m-t-black::after{
      background: transparent;
    }
    .m-l-black::before{
      background: #fff;
    }
  }
</style>
